<template>
    <div id="app" class="page-fav">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-tabs">
                    <a @click="go('history')">历史</a>
                    <a href="javascript:;" class="on">收藏</a>
                </div>
                <a href="javascript:;" slot="right" class="header-right" @click="page.edit = !page.edit">
                    <span>{{page.edit ? '取消' : '编辑'}}</span>
                </a>
            </page-bar>
        </scroll-fixed>
        <scroll-list :disabled="true" :config="scroll" @bottom="loadmore">
            <ui-item v-for="item in favList" :item="item" class="edit-item" @click.native="addItem(item)" :class="{'edit':page.edit ,'on':checkbox.indexOf(item.collect_id)!== -1}" :key="item.id"></ui-item>
        </scroll-list>
        <page-error v-if="!hasData && !favList.length">
            <template slot="logo">
                <img src="../assets/no-collect.png" class="logo">
            </template>
            <template slot="text">
                <p class="text">还没有收藏内容</p>
            </template>
        </page-error>

        <!-- en dui-list -->

        <div class="eidt-bar" v-show="page.edit">
            <a href="javascript:void(0);" @click="selectAll">全选</a>
            <a href="javascript:void(0);" @click="deleteItem">
                <i class="uicon uicon-del"></i> 删除</a>
        </div>
    </div>
</template>
<script>
import Items from "../components/items.vue";
import pageBar from "../components/pagebar.vue";
import scrollFixed from "../components/scrollFixed.vue";
import ScrollList from "../components/scrollList.vue";
import pageError from "../components/pageError.vue";

export default {
    name: "page-fav",
    components: {
        [Items.name]: Items,
        [pageBar.name]: pageBar,
        [ScrollList.name]: ScrollList,
        [scrollFixed.name]: scrollFixed,
        [pageError.name]: pageError
    },
    data() {
        return {
            page: {
                edit: false
            },
            isSelectAll: false,
            scroll: {
                bottom: false
            },
            checkbox: [],
            page_no: 1,
            hasData: true,
            favList: [],
        };
    },
    mounted () {
        this.getFavList().then(() => {
                this.$nextTick(() => {
                    this.scroll.bottom = this.favList.length == 0 ? 'hidden' : (!this.hasData ? 'done' :  false);
                });
            });
    },
    methods: {
        go(path){
            location.href = this.$config.pages[path];
        },
        loadmore() {
            if (!this.hasData || this.scroll.bottom) return false;
            this.scroll.bottom = true;
            this.getFavList().then(() => {
                this.$nextTick(() => {
                    this.scroll.bottom = !this.hasData ? 'done' :  false;
                });
            });
        },
        deleteItem() {
            this.$http.post('?ct=member_center&ac=del_collect',{
                ids:this.checkbox.join(',')
            }).then(response=>{
                let {data} = response;
                if(data.code !== 0){
                    this.$toast(data.msg)
                }else{
                     this.checkbox.forEach(collect_id=>{
                        for(let i = 0,len = this.favList.length;i<len;i++){
                            if(this.favList[i].collect_id == collect_id){
                                this.$delete(this.favList,i);
                                break;
                            }
                        }
                    });
                    this.checkbox = [];
                }
                
            }).catch(e=>{
                this.$toast(e.message);
            })
        },
        selectAll() {
            if (this.isSelectAll) {
                this.checkbox = [];
                this.isSelectAll = false;
            } else {
                this.isSelectAll = true;
                this.favList.forEach(item => {
                    this.checkbox.indexOf(item.collect_id) === -1 && this.checkbox.push(item.collect_id);
                });
            }
        },
        addItem(item) {
            if (this.page.edit) {
                let collect_id = this.checkbox.indexOf(item.collect_id);
                if (collect_id === -1) {
                    this.checkbox.push(item.collect_id);
                } else {
                    this.checkbox.splice(collect_id, 1);
                }
            }
        },
        getFavList() {
            if(this.hasData) {
                return this.$http.get("?ct=member_center&ac=get_collect&page_no=" + this.page_no).then(res => {
                    if (res.data.code !== 0) { 
                        this.$toast(res.data.msg);
                    } else {
                        let _this = this;
                        let data = res.data.data
                        this.hasData = !!data.is_have_data;
                        !this.hasData || this.page_no++
                        data.list.forEach(item => {
                            let tmpItem = item;
                            tmpItem.type = 'normal';
                            tmpItem.src = item.cover_img[0];
                            tmpItem.source = item.source;
                            tmpItem.view = item.browse_total;
                            tmpItem.url = item.detail_url ;
                            _this.favList.push(tmpItem)
                        })
                    }
                });
            }
        }
    }
};
</script>
<style lang="less">
.detail-end {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    color:#c6c6c6;
    font-size:28px;
}
.page-fav {
    background: #fff;
    .page-error {
        position: absolute;
        height: 300px;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        .text {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            line-height: 1;
        }
    }
    .header-tabs {
    display: flex;
    height: 82px;
    font-size: 30px;

    a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: #919191;
      & + a {
        margin-left: 80px;
      }
      &.on {
        font-weight: bold;
        color: #333;
      }
      &.on::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 80%;
        height: 6px;
        background-color: #e64a19;
        border-radius: 3px;
      }
    }
  }
  .header-right {
    font-size: 30px;
    color: #c6c6c6;
  }

  .edit-item {
    position: relative;

    &.edit {
      padding-left: 100px;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
      }
    }

    &.edit.on::before {
      content: "\0393";
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: #e64a19;
      border: none;
      font-size: 30px;
    }
    &.edit::before {
      content: "";
      position: absolute;
      left: 25px;
      right: 0;
      top: 50%;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid #c6c6c6;
      transform: translateY(-50%) rotate(-135deg);
    }
  }
  .eidt-bar {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 30px;
    justify-content: space-between;
    height: 90px;
    font-size: 28px;
    background-color: rgba(230, 74, 25, 0.9);
    &,
    a {
      display: flex;
      align-items: center;
    }
    a {
      justify-content: center;
      color: #fff;
      i {
        margin-right: 8px;
      }
    }
  }
}
</style>


